<template>
  <div class="table-page">
    <GiTable
      row-key="id"
      title="运费模板管理"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      @refresh="search"
    >
      <template #custom-left>
        <a-input
          v-model="queryForm.name"
          placeholder="请输入模板名称"
          allow-clear
          @change="search"
        >
          <template #prefix><icon-search /></template>
        </a-input>
        <a-button @click="reset">重置</a-button>
      </template>
      <template #custom-right>
        <a-button
          v-permission="['common:shippingTemplates:add']"
          type="primary"
          @click="onAdd"
        >
          <template #icon><icon-plus /></template>
          <span>新增</span>
        </a-button>
        <a-tooltip content="导出">
          <a-button
            v-permission="['common:shippingTemplates:export']"
            class="gi_hover_btn-border"
            @click="onExport"
          >
            <template #icon>
              <icon-download />
            </template>
          </a-button>
        </a-tooltip>
      </template>
      <template #name="{ record }">
        {{ record.name }}
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link
            v-permission="['common:shippingTemplates:update']"
            @click="onUpdate(record)"
            >修改</a-link
          >
          <a-link
            v-permission="['common:shippingTemplates:delete']"
            status="danger"
            :disabled="record.disabled"
            @click="onDelete(record)"
          >
            删除
          </a-link>
        </a-space>
      </template>
    </GiTable>

    <ShippingTemplatesAddModal
      ref="ShippingTemplatesAddModalRef"
      @save-success="search"
    />
  </div>
</template>

<script setup lang="ts">
import ShippingTemplatesAddModal from "./ShippingTemplatesAddModal.vue";
import {
  type ShippingTemplatesQuery,
  type ShippingTemplatesResp,
  deleteShippingTemplates,
  exportShippingTemplates,
  listShippingTemplates,
} from "@/apis";
import type { TableInstanceColumns } from "@/components/GiTable/type";
import { useDownload, useTable } from "@/hooks";
import { isMobile } from "@/utils";
import has from "@/utils/has";
import { useDict } from "@/hooks/app";

defineOptions({ name: "ShippingTemplates" });

const queryForm = reactive<ShippingTemplatesQuery>({
  name: undefined,
  sort: ["createTime,desc"],
});

const { type_enum } = useDict("type_enum");

const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable((page) => listShippingTemplates({ ...queryForm, ...page }), {
  immediate: true,
});

const columns: TableInstanceColumns[] = [
  { title: "模板名称", dataIndex: "name", slotName: "name" },
  {
    title: "计费方式",
    dataIndex: "type",
    slotName: "type",
    render: ({ record }) => {
      let content;

      switch (record.type) {
        case '1':
          content = "按件数";
          break;
        case '2':
          content = "按重量";
          break;
        case '3':
          content = "按体积";
          break;
        default:
          content = record.type; // or use `record.type` to display the value directly
          break;
      }

      return h("span", {}, content);
    },
  },
  { title: "指定包邮", dataIndex: "appoint", slotName: "appoint",
    render: ({ record }) => {
      let content;
      if(record.appoint){
        content = '是'
      }else{
        content = '否'
      }
      return h("span", {}, content);
    },
   },
  { title: "排序", dataIndex: "sort", slotName: "sort" },
  { title: "创建时间", dataIndex: "createTime", slotName: "createTime" },
  {
    title: "操作",
    slotName: "action",
    width: 130,
    align: "center",
    fixed: !isMobile() ? "right" : undefined,
    show: has.hasPermOr([
      "common:shippingTemplates:update",
      "common:shippingTemplates:delete",
    ]),
  },
];

// 重置
const reset = () => {
  queryForm.name = undefined;
  search();
};

// 删除
const onDelete = (item: ShippingTemplatesResp) => {
  return handleDelete(() => deleteShippingTemplates(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  });
};

// 导出
const onExport = () => {
  useDownload(() => exportShippingTemplates(queryForm));
};

const ShippingTemplatesAddModalRef =
  ref<InstanceType<typeof ShippingTemplatesAddModal>>();
// 新增
const onAdd = () => {
  ShippingTemplatesAddModalRef.value?.onAdd();
};

// 修改
const onUpdate = (item: ShippingTemplatesResp) => {
  ShippingTemplatesAddModalRef.value?.onUpdate(item.id);
};

</script>

<style lang="scss" scoped></style>
